<template>
<div>
  <div v-show="certificateListVisible" class="mod-configeded">
    <div class="div-s">
    <el-form :model="params" :label-position="labelPosition" :inline="true" label-width="70px" class="queryFormed">
        <el-row class="row-s">
          <el-col :span="6">
           <el-form-item label="录入类型">
            <el-select v-model="params.certificateType">
              <el-option
                v-for="item in certificateTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col class="col-center" :span="6">
          <el-form-item label="状态">
            <el-select v-model="params.type">
              <el-option
                v-for="item in statuses"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col class="col-center" :span="6">
          <el-form-item label="姓名">
            <el-input v-model="params.name" clearable placeholder="请填写姓名"></el-input>
          </el-form-item>
      </el-col>
      <el-col class="col-right" v-if="conceal" :span="6">
      <el-form-item label="身份证号">
            <el-input v-model="params.idCard" clearable placeholder="请填写身份证号"></el-input>
      </el-form-item>
      </el-col>
      <el-col v-if="conceal" :span="6">
      <el-form-item label="手机号">
            <el-input v-model="params.toUserMobile" clearable placeholder="请填写手机号"></el-input>
      </el-form-item>
      </el-col>
      <el-col class="col-center" v-if="conceal" :span="6">
      <el-form-item label="学历">
            <el-select v-model="params.academic" placeholder="请选择学历">
                <el-option
                  v-for="item in academics"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
      </el-form-item>
      </el-col>
      <el-col class="col-center" v-if="conceal" :span="6">
      <el-form-item label="证书类型">
            <el-select v-model="params.pidType" filterable placeholder="请选择证书类型" @change="jobChange">
              <el-option
                v-for="item in editableTabs"
                :key="item.id"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
      </el-form-item>
      </el-col>
      <el-col class="col-right" v-if="conceal" :span="6">
      <el-form-item label="证书类别">
            <el-select v-model="params.idType" filterable placeholder="请选择证书类别" @change="confChange">
              <el-option
                v-for="item in confInfos"
                :key="item.id"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
      </el-form-item>
      </el-col>
      <el-col v-if="conceal" :span="6">
      <el-form-item label="证书专业">
            <el-select v-model="params.profession" placeholder="请选择证书专业">
                <el-option
                  v-for="item in professions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
      </el-form-item>
      </el-col>
      <el-col class="col-center" v-if="concealName" :span="6">
      <el-form-item label="保管部门">
            <el-tree-select
              style="width:100%"
              :data="treeData"
              v-model="params.keepDeptId"
              node-key="id"
              placeholder="请选择保管部门"
            />
      </el-form-item>
      </el-col>
      <!-- <el-col v-if="conceal" :span="6">
      <el-form-item label="证书编号">
          <el-input v-model="params.certificateNo" placeholder="请填写证书编号"></el-input>
      </el-form-item>
      </el-col> -->
      <el-col class="col-center" v-if="conceal" :span="6">
          <el-form-item label="证书编号">
            <el-input v-model="params.certificateNo" clearable placeholder="请填写证书编号"></el-input>
          </el-form-item>
      </el-col>
      <el-col :class='{"col-right":userCol ==1,"col-center":userCol ==2}' v-if="conceal" :span="6">
      <el-form-item class="fazheng" label="发证日期">
          <el-date-picker type="date" v-model="params.releaseTime" :picker-options="pickerOptionsValidityEndTimeA" placeholder="请选择发证日期" style="width:100%"></el-date-picker>
      </el-form-item>
      </el-col>
      <el-col :class='{"col-essss":userCol ==1,"col-right":userCol ==2}' v-if="conceal" :span="6">
      <el-form-item class="fazheng" label="证书到期">
            <el-date-picker type="date" v-model="params.validityEndTime" @blur="blurValidityEndTime" placeholder="请选择到期日期" :picker-options="pickerOptionsValidityEndTime" style="width:100%"></el-date-picker>
      </el-form-item>
      </el-col>
      <!-- <el-button class="buttonItem" type="primary" @click="clickDataFormSubmit()">搜 索</el-button> -->
      <!-- <el-button class="buttonItem" size="small" type="primary" icon="el-icon-refresh-right picturess" @click="queryAll()">重置</el-button> -->
      <!-- <el-button class="buttonItem" size="small" type="primary" icon="iconfont iconsoushuo" @click="queryHandle()">  高级搜索</el-button> -->
      <!-- <el-form-item class="itemButton"> -->
        <!-- <el-button class="buttonItem" size="small" type="danger" icon="iconfont iconlajixiang" v-if="isAuth('certificate:certificateInfo:delete')" @click="certificateinfoCrashHandler()">已作废</el-button> -->
        <!-- <el-button class="buttonItem" size="small" type="primary" plain icon="iconfont iconexcel" @click="exportXls()">证书导出</el-button> -->
        <!-- <el-button class="buttonItem" size="small" icon="el-icon-picture picturess" @click="noCertificate">无证书图片</el-button> -->
        <!-- <div id="login_container"></div> -->
      <!-- </el-form-item> -->
      <el-col class="col-center" v-if="conceal" :span="6">
      <el-form-item class="fazheng" label="流转日期">
      <el-date-picker type="date" v-model="params.transactionTime" placeholder="请选择流转日期" :picker-options="pickerOptionsValidityEndTimeLiuA" style="width:100%"></el-date-picker>
      </el-form-item>
        </el-col>
      <el-col class="col-center" v-if="conceal" :span="6">
        <el-form-item class="fazheng" label="到期日期">
            <el-date-picker type="date" v-model="params.transactionEndTime" @blur="blurtra" placeholder="请选择到期日期" :picker-options="pickerOptionsValidityEndTimeLiu" style="width:100%"></el-date-picker>
      </el-form-item>
        </el-col>
        <el-col v-if="concealNameCol" :span="6">
        <el-form-item>
      </el-form-item>
        </el-col>
      <el-col class="col-right" :span="6">
      <el-form-item class="item-all">
      <el-button v-if="isAuth('certificate:certiTransactionInfo:info')" class="buttonItem" size="mini" plain @click="queryAll()">重 置</el-button>
      <el-button v-if="isAuth('certificate:certiTransactionInfo:info')" class="buttonItem" size="mini" type="primary" @click="clickDataFormSubmit()">搜 索</el-button>
      <el-button style="color:#6E92E9;" v-if="unfold" @click="clicKunfold()" type="text">展开<i class="el-icon-arrow-down zhankai"></i></el-button>
      <el-button style="color:#6E92E9;" v-if="!unfold" @click="clickPackUp()" type="text">收起<i class="el-icon-arrow-up zhankai"></i></el-button>
      </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
    <div class="div-e">
     <div class="div-inquire">
        <div class="in-t">
          <div class="in-ts"></div>
          <h3>证书流转</h3>
        </div>


        <div class="div-button">
        <!-- 证书流转批量上传 s-->
        <el-upload
         class="upload-trans"
         :action='uploadTransAction()'
         :on-success="onSuccessTrans"
         accept=".xlsx"
         :headers="myHeader"
         :limit="1"
         ref="uploadTrans"
         :on-exceed="handleExceed"
         >
         <el-button v-if="isAuth('certificate:certiTransactionInfo:info')" class="div-buttonItema" type="primary"  plain size="mini" icon="el-icon-upload2">批量流转上传</el-button>
         </el-upload>
        <el-button v-if="isAuth('certificate:certiTransactionInfo:info')" class="div-buttonItemb" size="mini" type="primary" plain icon="el-icon-download" @click="templateDownloadTrans()">流转模板下载</el-button>
        <el-button  class="div-buttonItemc" size="mini" type="primary" plain icon="el-icon-edit-outline" @click="clickHangShou()">数据导出</el-button>


        </div>
      </div>
    <el-tabs class="tabs-s" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="全部" name="first">
      <el-table
      :data="dataList"
      :header-cell-style="{background:'#F5F7FA'}"
      @sort-change='sort_change'
      :max-height="tableHeight"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <!-- <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column> -->
      <el-table-column
        prop="certificateType"
        min-width="65"
        sortable='custom'
        align="center"
        label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.certificateType === 1">
            <el-tooltip placement="top">在职员工</el-tooltip>
            <!-- <svg class="iconPro" aria-hidden="true">
              <use xlink:href="#icon-iconjianzhi"></use>
            </svg> -->
            在职员工
          </span>
          <span v-else-if="scope.row.certificateType === 2">
            <el-tooltip placement="top">挂靠</el-tooltip>
            <!-- <svg class="iconPro" aria-hidden="true" >
              <use xlink:href="#icon-iconzibei"></use>
            </svg> -->
            挂靠
          </span>
          <span v-else>
            <el-tooltip placement="top">非在职员工</el-tooltip>
            <!-- <svg class="iconPro" aria-hidden="true" >
              <use xlink:href="#icon-iconzibei"></use>
            </svg> -->
            非在职员工
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        sortable='custom'
        min-width="70"
        align="center"
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.type === 11">
            <span class="font_family icon-tuoyuan1" style="color:#6E92E9"></span>
            挂入
          </span>
          <span v-if="scope.row.type === 12">
            <span class="font_family icon-tuoyuan1" style="color:#6E92E9"></span>
            归还
          </span>
          <span v-if="scope.row.type === 21">
            <span class="font_family icon-tuoyuan1" style="color:#6EE976"></span>
            挂出
          </span>
          <span v-if="scope.row.type === 22">
            <span class="font_family icon-tuoyuan1" style="color:#E96E6E"></span>
            收回
          </span>
          <span v-if="scope.row.type === 3">
            <span class="font_family icon-tuoyuan1" style="color:#E9D56E"></span>
            借出
          </span>
           <span v-if="scope.row.type === 30">
            <span class="font_family icon-tuoyuan1" style="color:#E96E6E"></span>
            还回
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        min-width="70"
        sortable='custom'
        align="center"
        label="姓名">
      </el-table-column>
      <!-- <el-table-column
        prop="idCard"
        sortable='custom'
        min-width="170"
        label="身份证号">
      </el-table-column> -->
      <el-table-column
        prop="idType"
        align="center"
        sortable='custom'
        min-width="120"
        label="证书类型">
      </el-table-column>
      <el-table-column
        prop="profession"
        sortable='custom'
        align="center"
        min-width="160"
        label="证书专业"
        :formatter="dateFormats">
      </el-table-column>
      <el-table-column
        prop="certificateNo"
        sortable='custom'
        align="center"
        min-width="160"
        label="证书编号">
      </el-table-column>
      <!-- <el-table-column
        prop="validityEndTime"
        header-align="center"
        align="center"
        min-width="120"
        label="证书到期日期"
        :formatter="dateFormat">
      </el-table-column> -->
      <el-table-column
        prop="toUserName"
        sortable='custom'
        align="center"
        min-width="80"
        label="联系人"
        :formatter="dateFormats">
      </el-table-column>
      <el-table-column
        prop="toUserMobile"
        sortable='custom'
        align="center"
        min-width="120"
        label="联系人手机号"
        :formatter="dateFormats">
      </el-table-column>
      <el-table-column
        prop="transactionTime"
        sortable='custom'
        align="center"
        min-width="120"
        label="流转时间"
        :formatter="dateFormats"
>
      </el-table-column>
      <el-table-column
        prop="transactionEndTime"
        sortable='custom'
        min-width="110"
        align="center"
        label="到期日期"
        :formatter="dateFormats"
        >
      </el-table-column>
       <el-table-column
        min-width="80"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button style="color:#6E92E9;" type="text" size="mini" @click="addOrUpdateHandle(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, prev, pager, next, sizes, jumper">
    </el-pagination>
    </el-tab-pane>
    <el-tab-pane label="半个月内到期" name="third">
    <el-table
      :data="dataList"
      :header-cell-style="{background:'#F5F7FA'}"
      @sort-change='sort_change'
      :max-height="tableHeight"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <!-- <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column> -->
      <el-table-column
        prop="certificateType"
        min-width="65"
        sortable='custom'
        align="center"
        label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.certificateType === 1">
            <el-tooltip placement="top">在职员工</el-tooltip>
            <!-- <svg class="iconPro" aria-hidden="true">
              <use xlink:href="#icon-iconjianzhi"></use>
            </svg> -->
            在职员工
          </span>
          <span v-else-if="scope.row.certificateType === 2">
            <el-tooltip placement="top">挂靠</el-tooltip>
            <!-- <svg class="iconPro" aria-hidden="true" >
              <use xlink:href="#icon-iconzibei"></use>
            </svg> -->
            挂靠
          </span>
          <span v-else>
            <el-tooltip placement="top">非在职员工</el-tooltip>
            <!-- <svg class="iconPro" aria-hidden="true" >
              <use xlink:href="#icon-iconzibei"></use>
            </svg> -->
            非在职员工
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        sortable='custom'
        align="center"
        min-width="70"
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.type === 11">
            <span class="font_family icon-tuoyuan1" style="color:#6E92E9"></span>
            挂入
          </span>
          <span v-if="scope.row.type === 12">
            <span class="font_family icon-tuoyuan1" style="color:#6E92E9"></span>
            归还
          </span>
          <span v-if="scope.row.type === 21">
            <span class="font_family icon-tuoyuan1" style="color:#6EE976"></span>
            挂出
          </span>
          <span v-if="scope.row.type === 22">
            <span class="font_family icon-tuoyuan1" style="color:#E96E6E"></span>
            收回
          </span>
          <span v-if="scope.row.type === 3">
            <span class="font_family icon-tuoyuan1" style="color:#E9D56E"></span>
            借出
          </span>
           <span v-if="scope.row.type === 30">
            <span class="font_family icon-tuoyuan1" style="color:#E96E6E"></span>
            还回
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        min-width="70"
        align="center"
        sortable='custom'
        label="姓名">
      </el-table-column>
      <!-- <el-table-column
        prop="idCard"
        sortable='custom'
        min-width="170"
        label="身份证号">
      </el-table-column> -->
      <el-table-column
        prop="idType"
        sortable='custom'
        align="center"
        min-width="120"
        label="证书类型">
      </el-table-column>
      <el-table-column
        prop="profession"
        sortable='custom'
        align="center"
        min-width="160"
        :formatter="dateFormats"
        label="证书专业">
      </el-table-column>
      <el-table-column
        prop="certificateNo"
        align="center"
        sortable='custom'
        min-width="160"
        :formatter="dateFormats"
        label="证书编号">
      </el-table-column>
      <!-- <el-table-column
        prop="validityEndTime"
        header-align="center"
        align="center"
        min-width="120"
        label="证书到期日期"
        :formatter="dateFormat">
      </el-table-column> -->
      <el-table-column
        prop="toUserName"
        sortable='custom'
        align="center"
        min-width="80"
        :formatter="dateFormats"
        label="联系人">
      </el-table-column>
      <el-table-column
        prop="toUserMobile"
        sortable='custom'
        min-width="120"
        align="center"
        :formatter="dateFormats"
        label="联系人手机号">
      </el-table-column>
      <el-table-column
        prop="transactionTime"
        sortable='custom'
        min-width="120"
        align="center"
        label="流转时间"
        :formatter="dateFormats">
      </el-table-column>
      <el-table-column
        prop="transactionEndTime"
        sortable='custom'
        min-width="110"
        align="center"
        label="到期日期"
        :formatter="dateFormats">
      </el-table-column>
        <el-table-column
        min-width="80"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button style="color:#6E92E9;" type="text" size="mini" @click="addOrUpdateHandle(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :total="totalPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, sizes, jumper">
    </el-pagination>
    </el-tab-pane>
     <el-tab-pane label="七天内到期" name="ones">
    <el-table
      :data="dataList"
      :header-cell-style="{background:'#F5F7FA'}"
      @sort-change='sort_change'
      :max-height="tableHeight"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <!-- <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column> -->
      <el-table-column
        prop="certificateType"
        min-width="65"
        sortable='custom'
        align="center"
        label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.certificateType === 1">
            <el-tooltip placement="top">在职员工</el-tooltip>
            <!-- <svg class="iconPro" aria-hidden="true">
              <use xlink:href="#icon-iconjianzhi"></use>
            </svg> -->
            在职员工
          </span>
          <span v-else-if="scope.row.certificateType === 2">
            <el-tooltip placement="top">挂靠</el-tooltip>
            <!-- <svg class="iconPro" aria-hidden="true" >
              <use xlink:href="#icon-iconzibei"></use>
            </svg> -->
            挂靠
          </span>
          <span v-else>
            <el-tooltip placement="top">非在职员工</el-tooltip>
            <!-- <svg class="iconPro" aria-hidden="true" >
              <use xlink:href="#icon-iconzibei"></use>
            </svg> -->
            非在职员工
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        sortable='custom'
        min-width="70"
        align="center"
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.type === 11">
            <span class="font_family icon-tuoyuan1" style="color:#6E92E9"></span>
            挂入
          </span>
          <span v-if="scope.row.type === 12">
            <span class="font_family icon-tuoyuan1" style="color:#6E92E9"></span>
            归还
          </span>
          <span v-if="scope.row.type === 21">
            <span class="font_family icon-tuoyuan1" style="color:#6EE976"></span>
            挂出
          </span>
          <span v-if="scope.row.type === 22">
            <span class="font_family icon-tuoyuan1" style="color:#E96E6E"></span>
            收回
          </span>
          <span v-if="scope.row.type === 3">
            <span class="font_family icon-tuoyuan1" style="color:#E9D56E"></span>
            借出
          </span>
           <span v-if="scope.row.type === 30">
            <span class="font_family icon-tuoyuan1" style="color:#E96E6E"></span>
            还回
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        min-width="70"
        sortable='custom'
        align="center"
        label="姓名">
      </el-table-column>
      <!-- <el-table-column
        prop="idCard"
        sortable='custom'
        min-width="170"
        label="身份证号">
      </el-table-column> -->
      <el-table-column
        prop="idType"
        align="center"
        sortable='custom'
        min-width="120"
        label="证书类型">
      </el-table-column>
      <el-table-column
        prop="profession"
        sortable='custom'
        align="center"
        min-width="160"
        :formatter="dateFormats"
        label="证书专业">
      </el-table-column>
      <el-table-column
        prop="certificateNo"
        align="center"
        sortable='custom'
        min-width="160"
        :formatter="dateFormats"
        label="证书编号">
      </el-table-column>
      <!-- <el-table-column
        prop="validityEndTime"
        header-align="center"
        align="center"
        min-width="120"
        label="证书到期日期"
        :formatter="dateFormat">
      </el-table-column> -->
      <el-table-column
        prop="toUserName"
        align="center"
        sortable='custom'
        min-width="80"
        :formatter="dateFormats"
        label="联系人">
      </el-table-column>
      <el-table-column
        prop="toUserMobile"
        sortable='custom'
        min-width="120"
        align="center"
        :formatter="dateFormats"
        label="联系人手机号">
      </el-table-column>
      <el-table-column
        prop="transactionTime"
        sortable='custom'
        align="center"
        min-width="120"
        label="流转时间"
        :formatter="dateFormats">
      </el-table-column>
      <el-table-column
        prop="transactionEndTime"
        sortable='custom'
        align="center"
        min-width="110"
        label="到期日期"
        :formatter="dateFormats">
      </el-table-column>
        <el-table-column
        min-width="80"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button style="color:#6E92E9;" type="text" size="mini" @click="addOrUpdateHandle(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :total="totalPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, sizes, jumper">
    </el-pagination>
    </el-tab-pane>
    <el-tab-pane label="三天内到期" name="santh">
    <el-table
      :data="dataList"
      :header-cell-style="{background:'#F5F7FA'}"
      @sort-change='sort_change'
      :max-height="tableHeight"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <!-- <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column> -->
      <el-table-column
        prop="certificateType"
        min-width="65"
        sortable='custom'
        align="center"
        label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.certificateType === 1">
            <el-tooltip placement="top">在职员工</el-tooltip>
            <!-- <svg class="iconPro" aria-hidden="true">
              <use xlink:href="#icon-iconjianzhi"></use>
            </svg> -->
            在职员工
          </span>
          <span v-else-if="scope.row.certificateType === 2">
            <el-tooltip placement="top">挂靠</el-tooltip>
            <!-- <svg class="iconPro" aria-hidden="true" >
              <use xlink:href="#icon-iconzibei"></use>
            </svg> -->
            挂靠
          </span>
          <span v-else>
            <el-tooltip placement="top">非在职员工</el-tooltip>
            <!-- <svg class="iconPro" aria-hidden="true" >
              <use xlink:href="#icon-iconzibei"></use>
            </svg> -->
            非在职员工
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        sortable='custom'
        align="center"
        min-width="70"
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.type === 11">
            <span class="font_family icon-tuoyuan1" style="color:#6E92E9"></span>
            挂入
          </span>
          <span v-if="scope.row.type === 12">
            <span class="font_family icon-tuoyuan1" style="color:#6E92E9"></span>
            归还
          </span>
          <span v-if="scope.row.type === 21">
            <span class="font_family icon-tuoyuan1" style="color:#6EE976"></span>
            挂出
          </span>
          <span v-if="scope.row.type === 22">
            <span class="font_family icon-tuoyuan1" style="color:#E96E6E"></span>
            收回
          </span>
          <span v-if="scope.row.type === 3">
            <span class="font_family icon-tuoyuan1" style="color:#E9D56E"></span>
            借出
          </span>
           <span v-if="scope.row.type === 30">
            <span class="font_family icon-tuoyuan1" style="color:#E96E6E"></span>
            还回
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        min-width="70"
        align="center"
        sortable='custom'
        label="姓名">
      </el-table-column>
      <!-- <el-table-column
        prop="idCard"
        sortable='custom'
        min-width="170"
        label="身份证号">
      </el-table-column> -->
      <el-table-column
        prop="idType"
        sortable='custom'
        align="center"
        min-width="120"
        label="证书类型">
      </el-table-column>
      <el-table-column
        prop="profession"
        align="center"
        sortable='custom'
        min-width="160"
        :formatter="dateFormats"
        label="证书专业">
      </el-table-column>
      <el-table-column
        prop="certificateNo"
        sortable='custom'
        align="center"
        min-width="160"
        :formatter="dateFormats"
        label="证书编号">
      </el-table-column>
      <!-- <el-table-column
        prop="validityEndTime"
        header-align="center"
        align="center"
        min-width="120"
        label="证书到期日期"
        :formatter="dateFormat">
      </el-table-column> -->
      <el-table-column
        prop="toUserName"
        sortable='custom'
        align="center"
        min-width="80"
        :formatter="dateFormats"
        label="联系人">
      </el-table-column>
      <el-table-column
        prop="toUserMobile"
        sortable='custom'
        min-width="120"
        align="center"
        :formatter="dateFormats"
        label="联系人手机号">
      </el-table-column>
      <el-table-column
        prop="transactionTime"
        sortable='custom'
        align="center"
        min-width="120"
        label="流转时间"
        :formatter="dateFormats">
      </el-table-column>
      <el-table-column
        prop="transactionEndTime"
        sortable='custom'
        align="center"
        min-width="110"
        label="到期日期"
        :formatter="dateFormats">
      </el-table-column>
        <el-table-column
        min-width="80"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button style="color:#6E92E9;" type="text" size="mini" @click="addOrUpdateHandle(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, prev, pager, next, sizes, jumper">
    </el-pagination>
    </el-tab-pane>
    <el-tab-pane label="已逾期" name="fourth">
    <el-table
      :data="dataList"
      @sort-change='sort_change'
      :max-height="tableHeight"
      :header-cell-style="{background:'#F5F7FA'}"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <!-- <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column> -->
      <el-table-column
        prop="certificateType"
        min-width="65"
        sortable='custom'
        align="center"
        label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.certificateType === 1">
            <el-tooltip placement="top">在职员工</el-tooltip>
            <!-- <svg class="iconPro" aria-hidden="true">
              <use xlink:href="#icon-iconjianzhi"></use>
            </svg> -->
            在职员工
          </span>
          <span v-else-if="scope.row.certificateType === 2">
            <el-tooltip placement="top">挂靠</el-tooltip>
            <!-- <svg class="iconPro" aria-hidden="true" >
              <use xlink:href="#icon-iconzibei"></use>
            </svg> -->
            挂靠
          </span>
          <span v-else>
            <el-tooltip placement="top">非在职员工</el-tooltip>
            <!-- <svg class="iconPro" aria-hidden="true" >
              <use xlink:href="#icon-iconzibei"></use>
            </svg> -->
            非在职员工
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        sortable='custom'
        align="center"
        min-width="70"
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.type === 11">
            <span class="font_family icon-tuoyuan1" style="color:#6E92E9"></span>
            挂入
          </span>
          <span v-if="scope.row.type === 12">
            <span class="font_family icon-tuoyuan1" style="color:#6E92E9"></span>
            归还
          </span>
          <span v-if="scope.row.type === 21">
            <span class="font_family icon-tuoyuan1" style="color:#6EE976"></span>
            挂出
          </span>
          <span v-if="scope.row.type === 22">
            <span class="font_family icon-tuoyuan1" style="color:#E96E6E"></span>
            收回
          </span>
          <span v-if="scope.row.type === 3">
            <span class="font_family icon-tuoyuan1" style="color:#E9D56E"></span>
            借出
          </span>
           <span v-if="scope.row.type === 30">
            <span class="font_family icon-tuoyuan1" style="color:#E96E6E"></span>
            还回
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        min-width="70"
        sortable='custom'
        align="center"
        label="姓名">
      </el-table-column>
      <!-- <el-table-column
        prop="idCard"
        sortable='custom'
        min-width="170"
        label="身份证号">
      </el-table-column> -->
      <el-table-column
        prop="idType"
        sortable='custom'
        align="center"
        min-width="120"
        :formatter="dateFormats"
        label="证书类型">
      </el-table-column>
      <el-table-column
        prop="profession"
        sortable='custom'
        align="center"
        min-width="160"
        :formatter="dateFormats"
        label="证书专业">
      </el-table-column>
      <el-table-column
        prop="certificateNo"
        sortable='custom'
        align="center"
        min-width="160"
        :formatter="dateFormats"
        label="证书编号">
      </el-table-column>
      <!-- <el-table-column
        prop="validityEndTime"
        header-align="center"
        align="center"
        min-width="120"
        label="证书到期日期"
        :formatter="dateFormat">
      </el-table-column> -->
      <el-table-column
        prop="toUserName"
        sortable='custom'
        align="center"
        min-width="80"
        :formatter="dateFormats"
        label="联系人">
      </el-table-column>
      <el-table-column
        prop="toUserMobile"
        sortable='custom'
        min-width="120"
        :formatter="dateFormats"
        align="center"
        label="联系人手机号">
      </el-table-column>
      <el-table-column
        prop="transactionTime"
        sortable='custom'
        min-width="120"
        :formatter="dateFormats"
        label="流转时间"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="transactionEndTime"
        sortable='custom'
        min-width="110"
        label="到期日期"
        align="center"
        :formatter="dateFormats">
      </el-table-column>
        <el-table-column
        min-width="80"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button style="color:#6E92E9;" type="text" size="mini" @click="addOrUpdateHandle(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :total="totalPage"
      :page-size="pageSize"
      layout="total, prev, pager, next,sizes, jumper">
    </el-pagination>
    </el-tab-pane>
    </el-tabs>
    </div>
    <certitrans-info v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></certitrans-info>
    <query-model v-if="queryModelVisible" ref="queryModel" @refreshDataList="setParams"></query-model>
  <el-dialog
  title="证书批量流转录入结果"
  :visible.sync="matchingDialogVisible"
  width="50%"
  center>
  <span>
  <div class="consequence">
    <div class="consequence-s">
     <div>
       <i class="el-icon-success chenggong"></i>{{this.success}}人导入成功
       </div>
    </div>
    <div class="consequence-e">
    <div>
      <i class="el-icon-error shibai"></i>{{this.fail}}人导入失败
      </div>
    </div>
  </div>
  <div>
    <el-table
    :data="tableData"
    height="350"
    border
    style="width: 100%">
    <el-table-column
    align="center"
      type="index"
      header-align="center"
      label="#"
      width="40">
    </el-table-column>
    <el-table-column
      prop="certificateNo"
      header-align="center"
      align="center"
      label="证书编号">
    </el-table-column>
    <el-table-column
      prop="msg"
      header-align="center"
      align="center"
      label="失败原因">
    </el-table-column>
    <el-table-column
      prop="type"
      label="操作类型"
      header-align="center"
      align="center"
      width="100">
      <template slot-scope="scope">
          <span v-if="scope.row.type === 3">
            流转
          </span>
          <span v-else-if="scope.row.type === 21">
            借出
          </span>
        </template>
    </el-table-column>
  </el-table>
  </div>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" plain @click="dialogClose">关 闭</el-button>
  </span>
</el-dialog>
  </div>
  <certificate-detail v-if="certificateListVisibleDetail" :isEdited="isEdited" :types="types" :flag="flag" :visId="visId"></certificate-detail>
  </div>
</template>

<script>
  import merge from 'lodash/merge'
  import CertitransInfo from './certitrans/certitrans-info'
  import CertificateDetail from './certinfo/certificate-list-detail'
  import QueryModel from './certitrans/query-model'
  import ElTreeSelect from "@/components/treeSelect/index.vue"
  import echarts from 'echarts'
  import Vue from 'vue'
  export default {
    data () {
      return {
        unfold:true,
        matchingDialogVisible:false,
        certificateListVisible:true,
        certificateListVisibleDetail:false,
        queryModelVisible: false,
        flag: false,
        indexPia:true,
        visId:{},
        types:888,
        isEdited: true,
        activeName: 'first',
        editableTabs: [],
        chartData: {
          columns: ['type', 'num'],
          rows: []
        },
        histogramData: {
          columns: ['d', '借出', '借入'],
          rows: []
        },
        chartExtend: {
          color: ['#07AB6E', '#E83E25', '#1B92FB', '#FC8E2D']
        },
        histogramExtend: {
          color: ['#E83E25', '#07AB6E']
        },
        loading: true,
        dataForm: {
          key: ''
        },
        dataList: [],
        tableData:[],
        treeData: [],
        userName:'',
        userCol:1,
        certificateTypes: [
          {
          value: '',
          label: '全部'
        },{
          value: 1,
          label: '在职员工'
        }, {
          value: 2,
          label: '挂靠'
        },
        {
          value: 3,
          label: '非在职员工'
        }
        ],
        academics: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '博士',
          label: '博士'
        }, {
          value: '硕士',
          label: '硕士'
        }, {
          value: '本科',
          label: '本科'
        }, {
          value: '专科',
          label: '专科'
        }, {
          value: '高职高专',
          label: '高职高专'
        }, {
          value: '中专',
          label: '中专'
        }, {
          value: '高中',
          label: '高中'
        }, {
          value: '初中',
          label: '初中'
        }, {
          value: '小学',
          label: '小学'
        }, {
          value: '其他',
          label: '其他'
        }],
        statuses:[
          {label: '全部', value:''},
          {label:'挂入', value:11},
          {label:'归还', value:12},
          {label:'挂出', value:21},
          // {label:'项目中', value:22},
          {label:'收回', value:22},
          {label:'借出', value:3},
          {label:'还回', value:30},
        ],
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0,
        conceal:false,
        concealName:false,
        concealNameCol:false,
        months:'',
        days:15,
        labelPosition:'right',
        tableHeight:0,
        dataListLoading: false,
        dataListSelections: [],
        pickerOptionsValidityEndTime: {
           disabledDate: (time) => {
              return time.getTime() < this.params.releaseTime
            }
        },
        pickerOptionsValidityEndTimeLiu:{
           disabledDate: (time) => {
              return time.getTime() < this.params.transactionTime
            }
        },
        pickerOptionsValidityEndTimeA: {},
        pickerOptionsValidityEndTimeLiuA:{},
        confInfos: [],
        professions: [],
        addOrUpdateVisible: false,
        type:'',
        fail:'',
        heightis: 301,
        name:'',
        success:'',
        params: {
          validityType:2,
          certificateType: '',
          keepDeptId: '',
          keepUserId: '',
          name: '',
          pidType:'all',
          idType: '',
          idCard: '',
          certificateNo: '',
          toUserMobile: '',
          profession:'',
          academic: '',
          releaseTime: '',
          validityEndTime: '',
          type: '',
          transactionTime: '',
          transactionEndTime: ''
        },
        orderBy:'',
        inOrder:''
      }
    },
    components: {
      CertitransInfo,
      QueryModel,
      ElTreeSelect,
      CertificateDetail
    },
    computed: {
    myHeader () {
      return {
        'token': Vue.cookie.get('token')
      }
     }
    },
    mounted () {
      this.getRingCollect()
      this.getCertDetailCollect()
      // this.$nextTick(() => {
      //       this.tableHeight = window.innerHeight - 310;
      //       //后面的50：根据需求空出的高度，自行调整
      // })
    },
    watch: {
      // params () {
      //   this.$nextTick(() => {
      //     this.getDataList()
      //   })
      // }
    },
    created(){
    this.getUserName()
    this.initOrgTree()
    this.initJobs()
    this.handleClick()
    this.clickPackUp()
    },
    methods: {
   clickHangShou(){

          this.$http({
          url: this.$http.adornUrl('/certificate/certiTransactionInfo/export'),
          method: 'get',
          responseType: 'blob', // 防止返回乱码
          // params: this.$http.adornParams(merge(this.params, {
          //   'status': this.flag ? 'crash' : this.params.status
          // })),
          showLoading: true
        }).then(({data}) => {
          if (data) {
            const link = document.createElement('a')
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            let fileName = '证书流转信息统计.xls'
            link.setAttribute('download', fileName)
            link.download = fileName // 下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        })

      },
      blurValidityEndTime(){
        if(this.params.validityEndTime !== ''){
        this.pickerOptionsValidityEndTimeA = {
           disabledDate: (time) => {
              return time.getTime() > this.params.validityEndTime
            }
        }
        }else{
           this.pickerOptionsValidityEndTimeA = {}
        }
      },
      blurtra(){
        if(this.params.transactionEndTime !== ''){
        this.pickerOptionsValidityEndTimeLiuA = {
             disabledDate: (time) => {
              return time.getTime() > this.params.transactionEndTime
            }
        }
        }else{
          this.pickerOptionsValidityEndTimeLiuA = {}
        }
      },
      addOrUpdateHandle(row){
        // console.log(223);
      this.visId = row
      this.certificateListVisible = false
      this.certificateListVisibleDetail = true

      },
      routerBack(){
      this.certificateListVisible = true
      this.certificateListVisibleDetail = false
      this.queryAll()
      },
      adjustTableHeight(){
      this.$nextTick(() => {
            this.tableHeight = window.innerHeight - this.heightis;
            //后面的50：根据需求空出的高度，自行调整
        })
      },
      sort_change(column){
      this.orderBy = column.prop
      if(column.order =='ascending'){
        this.inOrder = 'asc'
      }
      if(column.order =='descending'){
        this.inOrder = 'desc'
      }
      this.getDataList()
      },
      initJobs () {
      this.$http({
         url: this.$http.adornUrl('/certificate/certificateInfo/getJobs'),
         method: 'get',
         params: {}
      }).then(({data}) => {
        if (data && data.length > 0) {
          this.editableTabs = data
          // this.editableTabs[0].code = 'all'
          this.editableTabs[0].code = 'all'
          // setTimeout(() => {
          //   // this.activeName = 'all'
          // })
        }
        })
      },
      initOrgTree() {
        this.$http({
          url: this.$http.adornUrl('/tenant/tenantDeptInfo/tree'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.treeData = [data.deptInfo]
          } else {
            this.treeData = []
          }
        })
      },
      getUserName(){
      this.$http({
          url: this.$http.adornUrl('/sys/user/info'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.userName = data.user.name
            console.log(this.userName);
            console.log('UOO51');
          }
        })
      },
      jobChange(value, item){
        this.confInfos = []
        this.professions = []
        this.params.idType = ''
        this.params.profession = ''
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobsConf'),
          method: 'get',
          params: this.$http.adornParams({
                  'type': value
                })
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.confInfos = data
          }
        })
      },
      confChange(value, item){
        this.professions = []
        this.params.profession = ''
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobsConf'),
          method: 'get',
          params: this.$http.adornParams({
                  'type': value
                })
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.professions = data
          }
        })
      },
      // 批量流转上传
      uploadTransAction(){
      return this.$http.adornUrl(`/certificate/certiTransactionInfo/batchSave`)
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      onSuccessTrans(response, file, fileList){
      console.log(response)
      this.$refs.uploadTrans.clearFiles()
      if(response.code === 0){
        this.$message.success('上传成功')
        this.matchingDialogVisible = true
        this.tableData = response.data
        this.fail = response.fail
        this.success = response.success
      }else{
        this.$message.error(data.msg)
        this.$refs.uploadTrans.clearFiles()
      }
      },
      // 清空
      clicKunfold(){
      this.conceal = true
      this.unfold = false
      if(this.userName !== 'admin'){
      this.concealName = true
      }else{
        this.concealName = false
        this.concealNameCol = true
        this.userCol = 2
      }
      this.heightis = 464
      this.adjustTableHeight()
      },
      clickPackUp(){
      this.conceal = false
      this.concealNameCol = false
      this.concealName = false
      this.unfold = true
      this.heightis = 305
      this.adjustTableHeight()
      },
      queryAll(){
        this.days = 15
        this.params = {
          certificateType: '',
          validityType:2,
          keepDeptId: '',
          keepUserId: '',
          name: '',
          idType: '',
          idCard: '',
          certificateNo: '',
          mobile: '',
          profession:'',
          academic: '',
          type: '',
        }
        this.getDataList()
      },
      clickDataFormSubmit(){
      this.getDataList()
      },
      handleClick(tab, event){
      if(this.activeName === 'first'){
        this.params.validityType = '2'
        this.days = 15
        this.getDataList()
      }
      if(this.activeName === 'fourth'){
        this.params.validityType = '-1'
        this.getDataList()
      }
      if(this.activeName === 'ones'){
        this.days = 7
        this.params.validityType ='0'
        this.getDataList()
      }
      if(this.activeName === 'santh'){
        this.days = 3
        this.params.validityType ='0'
        this.getDataList()
      }
      if(this.activeName === 'third'){
        this.days = 15
        this.params.validityType ='0'
        this.getDataList()
      }
      if(this.conceal){
          this.clicKunfold()
      }else{
          this.clickPackUp()
      }
      },
      dialogClose(){
      this.matchingDialogVisible = false
      this.queryAll()
      },
      dateFormat (row, column, cellValue, index) {
        return cellValue ? cellValue.substring(0, 10) : ''
      },
      dateFormats(row, column, cellValue, index){
      if (!Boolean(cellValue)) {
                return "-";
            } else {
                return cellValue;
            }
      },
      setParams (params) {
        this.params = params
      },
      updateParams (validityType) {
        this.params.validityType = validityType
        this.getDataList()
      },
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/certificate/certiTransactionInfo/list'),
          method: 'get',
          params: this.$http.adornParams({
            'validityType':this.params.validityType,
            'certificateType':this.params.certificateType,
            'keepDeptId':this.params.keepDeptId,
            'keepUserId':this.params.keepUserId,
            'name':this.params.name,
            'pidType':this.params.pidType,
            'idType':this.params.idType,
            'idCard':this.params.idCard,
            'certificateNo':this.params.certificateNo,
            'toUserMobile':this.params.toUserMobile,
            'profession':this.params.profession,
            'academic':this.params.academic,
            'releaseTime':this.$dateFormat(this.params.releaseTime),
            'validityEndTime':this.$dateFormat(this.params.validityEndTime),
            'type':this.params.type,
            'transactionTime':this.$dateFormat(this.params.transactionTime),
            'transactionEndTime':this.$dateFormat(this.params.transactionEndTime),
            'page': this.pageIndex,
            'limit': this.pageSize,
            'days':this.days,
            'orderBy': this.orderBy,
            'inOrder': this.inOrder
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
            console.log(this.dataList);

          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      getDataListList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/certificate/certiTransactionInfo/list'),
          method: 'get',
          params: this.$http.adornParams(merge(this.params, {
            // 'type':this.type,
            'page': 1,
            'limit': this.pageSize,
            'months':this.months
          }))
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      templateDownloadTrans(){
      window.location.href = window.SITE_CONFIG.remoteUrl + 'others/certiTransaction-Template.xlsx'
      },
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // addOrUpdateHandle (id) {
      //   this.addOrUpdateVisible = true
      //   this.$nextTick(() => {
      //     this.$refs.addOrUpdate.init(id)
      //   })
      // },
      queryHandle () {
        this.queryModelVisible = true
        this.$nextTick(() => {
          this.$refs.queryModel.init()
        })
      },
      // restForm(){
      // this.params = {
      //     certificateType: '',
      //     name: '',
      //     type: ''
      //   }
      // // this.$refs.queryModel[this.index].dataFormSubmit()
      // this.getDataList()
      // },
      getRingCollect () {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getRingCollect'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.chartData.rows = data
          }
        })
      },
      getCertDetailCollect () {
        this.histogramData.rows = []
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/bbCertByJobCollect'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.length > 0) {
            for (var i = 0; i < data.length; i++) {
              this.histogramData.rows.push({ 'd': data[i].d, '借出': data[i].borrowNum, '借入': data[i].bringNum})
            }
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
.div-s{
  width: 100%;
  background-color: #FFFFFF;
}
.col-essss{
}
.div-e{
  width: 100%;
  background-color: #FFFFFF;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  margin-top: 15px;
}
.div-inquire{
  width: 100%;
  height: 45px !important;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // display: flex;
  // align-items: center;
}

/deep/.div-buttonItemc{
  float: right;
  margin-right: 8px;
  margin-left: 0px !important;
  font-size: 14px;
  i{
    font-size: 14px;
  }
}
/deep/.div-buttonItemb{
  float: right;
    font-size: 14px;
  i{
    font-size: 14px;
  }
}
/deep/.buttonItem{
  font-size: 14px !important;
  i{
    font-size: 14px;
  }
  }
/deep/.div-buttonItema{
  float: right;
  margin-right: 8px;
  font-size: 14px;
  i{
    font-size: 14px;
  }
}
.div-button{
  // width: 30%;
  // float: right;
  margin-top: 15px;
}
.in-t{
  width: 50%;
  float: left;
  height: 45px;
  display: flex;
  align-items: center;
  h3{
    font-size: 16px;
    float: left;
    color: #000000;
    margin: 0px !important;
    padding: 0px !important;
  }
}
.in-ts{
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}
  .queryFormed .el-form-item{
    margin-top: 8px;
    margin-bottom: 8px;
  }
  /deep/.queryFormed .el-form-item{
    .el-select .el-input__inner{
    height: 36px!important;
    padding-right: 15px!important;
    padding-left: 15px!important;
    }
    .el-input--suffix .el-input__inner{
    padding-right: 15px!important;
    padding-left: 15px!important;
    }
  }
  .font_family{
    font-size: 15px !important;
  }
  .row-s{
  /deep/.el-col{
    display: flex;
    // justify-content: center;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
  }
}
/deep/.col-right{
.el-form-item{
margin-left: auto!important;
}
}
/deep/.el-col{
    .fazheng{
    .el-form-item__content{
    .el-input--suffix{
    .el-input__inner{
      padding-right: 0px!important;
      padding-left: 30px!important;
       }
     }
   }
 }
}
/deep/.col-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
// 分页颜色控制
.el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #409EFF !important;
    color: #fff !important;
  }
 .zhenshu-s{
  margin-bottom: 10px;
  }
  .itemButton{
  width: 100%;
  margin-top: 10px !important;
  }
  // margin-bottom: 10px;
  /deep/.itemButtonMini{
    // float: left;
    // margin-left: 5px;
    font-size: 14px;
    i{
      font-size: 16px !important;
    }
  }
  /deep/.itemButtonSmall{
    float: left;
    font-size: 14px;
    margin-left: 15px !important;
    i{
    font-size: 16px;
    }
}
.buttonsuo{
  font-size: 14px;
}
.gaoji{
  font-size: 14px;
}
/deep/.itemButtonUpload{
  font-size: 14px;
  i{
    font-size: 16px;
  }
}
.upload-trans{
  float: right;
  margin-left: 8px;
}
.mod-configeded{
  background-color: #F5F7FA;
  padding: 15px !important;
  // margin-top: 48px;
}
  .iconPro {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  // .upload-trans{
  // float: right;
  // margin-left: 18px;
  // }
  .queryFrome{
    margin-top: 8px;
    // margin-bottom: 5px !important;
  }
  .queryFrome .el-form-item{
    margin-bottom: 0px;
  }
  .el-button--danger {
    color: #f56c6c;
    background-color: #fff;
    border-color: #f56c6c;
  }
  .picturess{
      font-size: 16px;
    }
/deep/.tabs-s .el-tabs__active-bar{
  height: 2px !important;
}
/deep/.tabs-s{
  .el-tabs__header{
    .el-tabs__nav-wrap{
      margin-bottom: 0px !important;
     .el-tabs__nav-scroll{
      .el-tabs__nav{
        .el-tabs__item{
          border-right: none !important;
          border-left: none !important;
          background-color: #ffffff !important;
          // padding-left: 0px !important;
        }
      }
     }
    }
  }
}
/deep/.tabs-s{
.el-tabs__header{
  border-bottom: 1px solid #EBEEF5 !important;
  margin:0px 0px 8px 0px !important;
// .el-tabs__nav-wrap.is-scrollable{
//  padding:0px !important;
// }
  }
  }
  .el-button--warning {
    color: #fc8e2d;
    background-color: #fff;
    border-color: #fc8e2d;
  }
  .consequence{
    width: 100%;
    background-color: aqua;
    height: 60px;
    text-align: center;
    background-color: #FAFAFAFF;
    .consequence-s{
    div{
      height: 15px;
      margin-top: 15px;
    }
    .chenggong{
    width: 20px;
    color: #09AB6E;
    margin-right: 10px;
    }
    float: left;
     width: 50%;
     height: 60px;
     font-size: 15px;
     border: 1px solid #ccc;
    text-align: center;
    }
    .consequence-e{
      div{
      height: 15px;
      margin-top: 15px;
    }
    .shibai{
    width: 20px;
    color: red;
    margin-right: 10px;
      }
     float: left;
     width: 50%;
     height: 60px;
     text-align: center;
     font-size: 15px;
     border: 1px solid #ccc;
    }
  }
</style>
